<template>
  <div>

    <el-table :data="list" border fit highlight-current-row center style="width: 100%" :cell-class-name="getCellIndex" @cell-click="tabClick">
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="item.key !== 'opration'">
            <div v-if="rowIndex === scope.$index && columnIndex === scope.column.index">
              <el-input
                v-model="scope.row[item.key]"
                class="changeInput"
                @blur="handldUpdateData(scope.row)"
              />
            </div>
            <div v-else>
              <div v-if="item.key==='imgSrc'">
                <img style="width:150px" :src="scope.row[item.key]" alt="">
              </div>
              <div v-else>
                <div v-if="item.key==='productStatus'">
                  <span :class="scope.row['statusValue']==='SALED' ? 'upClass' : scope.row['statusValue']==='UNSALED' ? 'downClass' : ''">{{ scope.row[item.key] }}</span>
                </div>
                <div v-else>
                  {{ scope.row[item.key] }}<i v-if="item.isEditor" class="el-icon-edit" @click="handleEditor(scope)" />
                </div>
              </div>
            </div>
          </div>
          <!-- 操作栏 -->
          <div v-else class="editorDom">
            <!-- 商品 -->
            <div v-if="item.type==='product'">
              <div v-if="scope.row['statusValue']==='RECYCLED'" class="oprate">
                <el-button type="text" @click="handleProductChangeStatus(scope.row)">{{ $t('tab.toDraft') }}</el-button>
                <el-button type="text" @click="handleProductDel(scope.row)">{{ $t('tab.foreverDelete') }}</el-button>
              </div>
              <div v-else class="oprate">
                <el-button type="text" @click="handleProductEditor(scope.row)">{{ $t('tab.editor') }}</el-button>
                <el-button type="text" @click="handleProductChangeStatus(scope.row)">{{ scope.row['statusValue']!=='SALED' ? $t('product.productUp') : $t('product.productDown') }}</el-button>
                <el-button v-if="scope.row['statusValue']!=='SALED'" type="text" @click="handleProductDel(scope.row)">{{ $t('tab.delete') }}</el-button>
              </div>
            </div>
            <!-- 分组 -->
            <div v-if="item.type==='group'">
              <el-button type="text" @click="handleRelationProduct(scope.row)">{{ $t('tab.administrationPdoduct') }}</el-button>
            </div>
            <!-- 员工 -->
            <div v-if="item.type==='staffOpration'">
              <el-button type="text" @click="handleStaffDisabled(scope.row)">{{ $t('tab.disabled') }}</el-button>
              <el-button type="text" @click="handleStaffEditor(scope.row)">{{ $t('tab.editor') }}</el-button>
              <el-button type="text" @click="handleProductDel(scope.row)">{{ $t('tab.see') }}</el-button>
            </div>
            <!-- 角色 -->
            <div v-if="item.type==='role'">
              <el-button type="text">{{ $t('tab.see') }}</el-button>
            </div>
            <!-- 订单 -->
            <div v-if="item.type==='order'">
              <el-button type="text">{{ $t('tab.see') }}</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="listQuery.total > 0" style="margin-top:0" :total.sync="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
// import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    type: {
      type: String,
      default: 'CN'
    },
    tableLabel: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    listQuery: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      list: [],
      // listQueryD: {
      //   page: 1:
      //   limit: 5,
      //   type: this.type,
      //   sort: '+id'
      // },
      loading: false,
      rowIndex: '',
      columnIndex: ''
      // total: 2
    }
  },
  watch: {
    tableData(data) {
      this.list = data
      console.log(data)
    },
    listQuery: {
      handler(newValue, oldValue) {
        console.log('dffffffffffff', this.listQuery)
      },
      deep: true
    }
  },
  mounted() {
    console.log(this.list)
    this.list = this.tableData
  },
  methods: {
    getCellIndex: function({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
    getRowKey(val) {
      return
    },
    tabClick(row, column, cell, event) {
      this.tabClickIndex = row.index
      this.tableCellClickColumnIndex = column.index
      // this.$nextTick(() => {
      //   // 自动获取焦点 element组件autofocus失效
      //   var refs = this.$refs['focusingRef'].$refs

      //   if (refs.input) {
      //     // input输入框
      //     refs.input.focus()
      //   } else if (refs.reference) {
      //     // el-date-picker
      //     refs.reference.focus()
      //   }
      // })
    },
    getList() {
      this.loading = true
      this.$emit('getListThing') // for test
      // this.$parent.getGroupList()
    },
    handleEditor(scope) {
      this.rowIndex = scope.row.index
      this.columnIndex = scope.column.index
    },
    // 分组管理   关联商品
    handleRelationProduct(item) {
      console.log('子组件方法======>', item)
      this.$emit('handleRelationProduct', item)
    },
    // 商品修改
    handleProductEditor(item) {
      console.log(item)
      this.$emit('getHandleProductEditor', item)
    },
    // 商品上下架
    handleProductChangeStatus(item) {
      this.$emit('handleTabChangeStatus', item)
    },
    // 商品草稿箱
    handleProductDel(item) {
      this.$emit('handleTabDel', item)
    },
    // 修改信息
    handldUpdateData(item) {
      this.rowIndex = ''
      this.columnIndex = ''
      this.$emit('updateThing', item)
    },
    // 员工修改
    handleStaffEditor(item) {
      this.$emit('editorThing', item)
    },
    // user 禁用
    handleStaffDisabled() {

    }
  }
}
</script>
<style lang="scss" scoped>
  .el-icon-edit{
    margin-left: 10px
  }
  .editorDom {
    span:first-child {
      margin-left: 0;
    }
    span {
      margin-left: 8px;
      color: #1890FF
    }
  }
  .el-icon-edit {
    cursor:pointer;
    color: #1890FF;
  }
  .oprate {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  .upClass {
    color:#1890ff
  }
  .downClass {
    color:red
  }
</style>

